<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业展示</title>
    <style>
        body {
            height: 100000px;
            width: 550px;
            text-align: center;
        }
        
        .one {
            color: dimgrey;
            background-color: pink;
        }
        
        .two {
            color: cadetblue;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="first" class="one">
        雨霖铃
    </div>
    <div id="second" class="two">
        <h2>念去去、千里烟波，暮霭沉沉楚天阔。</h2>

        <div id="third" class="two">
            <h2>多情自古伤离别，更那堪、冷落清秋节！</h2>
        </div>

        <div id="forth" class="two">
            <p id="p1">
                <h2 id="h11">今宵酒醒何处？杨柳岸、晓风残月。</h2>
            </p>
        </div>
    </div>

    <ul style="background-color: pink;">
        <li>烈阳</li>
        <li>皓月</li>
        <li id="xx">晨星</li>
    </ul>
    <script>
        let first = document.getElementById("first")
        console.log(first)
        first.innerHTML = "<h1><span>《</span>雨霖铃<span>》</span></h1>"

        let myEle = document.createElement("h2")
        myEle.innerHTML = "寒蝉凄切，对长亭晚，骤雨初歇。"
        first.appendChild(myEle)

        let myEle1 = document.createElement("h2")
        myEle1.innerHTML = "都门帐饮无绪，留恋处、兰舟催发。"
        let myEle2 = document.createElement("h2")
        myEle2.innerHTML = "执手相看泪眼，竟无语凝噎。"
        first.append(myEle1, myEle2)
        first.append("======================================") 

        let second = document.querySelector("#second") 
        console.log(second)
        let third = document.querySelector(".two")
        console.log(third)

        let divs = document.getElementsByTagName("div")
        console.log(divs)
        divs[3].append("======================================")

        let p1 = document.getElementById("p1")
        let h11 = document.getElementById("h11")
        let myEle3 = document.createElement("h3")
        let myEle4 = document.createElement("h3")
        myEle3.innerHTML = "^-^   ^.^   ^-^   ^.^   ^-^   ^.^"
        myEle4.innerHTML = "   ^.^   ^-^   ^.^   ^-^   ^.^   "
            // divs[3].insertBefore(myEle3, p1)

        p1.before(myEle3)
        h11.after(myEle4)
        let span1 = document.getElementById("p1")
        span1.remove() 

        let list = document.getElementsByTagName("ul")
        console.log(list)
        console.log(list[0].children)
        for (item of list[0].children) {
            item.innerHTML = "星^-^星"
            break
        }


        console.log(list[0].children[2]) 

        let parent = list[0].children[0].parentElement
        parent.removeChild(xx)
    </script>
</body>

</html>